<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-container>
    <el-header style="background-color: #0096dc">
    <h1 style="color: white;font-size: 22px">
      餐厅后台管理系统
      <span style="float: right">
        欢迎XXX回来
        <a href="">退出登录</a>
      </span>
    </h1>
    </el-header>
    <el-container>
      <el-aside width="200px" style="overflow: hidden">
        <el-menu
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @select="handleSelect"
                @close="handleClose">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-flag"></i>
              <span>数据分析</span>
            </template>
              <el-menu-item index="1-1">菜品销量排行</el-menu-item>
              <el-menu-item index="1-2">客户年龄分布</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-picture"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="2-1">用户列表</el-menu-item>
            <el-menu-item index="2-2">添加用户</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-shopping-cart-2"></i>
              <span>订单管理</span>
            </template>
            <el-submenu index="3-1">
              <template slot="title">商品列表</template>
              <el-menu-item index="3-1-1">用户列表</el-menu-item>
              <el-menu-item index="3-1-2">添加用户</el-menu-item>
              <el-menu-item index="3-1-3">添加用户</el-menu-item>
              <el-menu-item index="3-1-4">添加用户</el-menu-item>
              <el-menu-item index="3-1-5">添加用户</el-menu-item>
            </el-submenu>
            <el-menu-item index="3-2">添加订单</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-shopping-cart-2"></i>
              <span>菜品管理</span>
            </template>
            <el-menu-item index="4-1">菜品列表</el-menu-item>
            <el-menu-item index="4-2">添加菜品</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-shopping-cart-2"></i>
              <span>员工管理</span>
            </template>
            <el-menu-item index="5-1">员工列表</el-menu-item>
            <el-menu-item index="5-2">添加员工</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-main>
        <el-table v-if="currentIndex=='1-1'" :data="categoryArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="分类名称" prop="name"></el-table-column>
          <el-table-column label="操作">
            <!--template 是自定义列时必须添加的标签，必须要有slot-scope-->
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleCategoryDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-table v-if="currentIndex=='2-1'" :data="bannerArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="轮播图" width="100px">
            <template slot-scope="scope">
              <img :src="scope.row.url" width="100%">
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <!--template 是自定义列时必须添加的标签，必须要有slot-scope-->
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleBannerDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-card v-if="currentIndex=='3-1-1'">
        <el-table  :data="productArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="创建时间" prop="date"></el-table-column>
          <el-table-column label="菜品类别" prop="category"></el-table-column>
          <el-table-column label="菜品名称" prop="name" ></el-table-column>
          <el-table-column label="菜品图片"  width="206px">
            <template slot-scope="scope">
              <img :src="scope.row.url" width="100%">
            </template>
          </el-table-column>
          <el-table-column label="菜品价格" prop="price" ></el-table-column>
          <el-table-column label="操作">
            <!--template 是自定义列时必须添加的标签，必须要有slot-scope-->
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="primary"
                      @click="handleProductAmend(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleProductDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        </el-card>
        <el-card v-if="currentIndex=='3-1-2'">
        <el-table  :data="productArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="创建时间" prop="date"></el-table-column>
          <el-table-column label="菜品名称" prop="name" ></el-table-column>
          <el-table-column label="商品图片"  width="206px">
            <template slot-scope="scope">
              <img :src="scope.row.url" width="100%">
            </template>
          </el-table-column>
          <el-table-column label="菜品价格" prop="price" ></el-table-column>
          <el-table-column label="操作">
            <!--template 是自定义列时必须添加的标签，必须要有slot-scope-->
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="primary"
                      @click="handleProductAmend(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleProductDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        </el-card >
        <el-card v-if="currentIndex=='3-1-3'">
        <el-table  :data="productArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="创建时间" prop="date"></el-table-column>
          <el-table-column label="菜品名称" prop="name" ></el-table-column>
          <el-table-column label="商品图片"  width="206px">
            <template slot-scope="scope">
              <img :src="scope.row.url" width="100%">
            </template>
          </el-table-column>
          <el-table-column label="菜品价格" prop="price" ></el-table-column>
          <el-table-column label="操作">
            <!--template 是自定义列时必须添加的标签，必须要有slot-scope-->
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="primary"
                      @click="handleProductAmend(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleProductDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        </el-card>
        <el-card v-if="currentIndex=='3-1-4'">
        <el-table :data="productArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="创建时间" prop="date"></el-table-column>
          <el-table-column label="菜品名称" prop="name" ></el-table-column>
          <el-table-column label="商品图片"  width="206px">
            <template slot-scope="scope">
              <img :src="scope.row.url" width="100%">
            </template>
          </el-table-column>
          <el-table-column label="菜品价格" prop="price" ></el-table-column>
          <el-table-column label="操作">
            <!--template 是自定义列时必须添加的标签，必须要有slot-scope-->
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="primary"
                      @click="handleProductAmend(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleProductDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        </el-card>
        <el-card v-if="currentIndex=='3-1-5'">
        <el-table :data="productArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="创建时间" prop="date"></el-table-column>
          <el-table-column label="菜品名称" prop="name" ></el-table-column>
          <el-table-column label="商品图片"  width="206px">
            <template slot-scope="scope">
              <img :src="scope.row.url" width="100%">
            </template>
          </el-table-column>
          <el-table-column label="菜品价格" prop="price" ></el-table-column>
          <el-table-column label="操作">
            <!--template 是自定义列时必须添加的标签，必须要有slot-scope-->
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="primary"
                      @click="handleProductAmend(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleProductDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        </el-card>

      </el-main>
    </el-container>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        productArr:[{title:"森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342},
          {title:"茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",price:233,oldPrice:598,url:"imgs/b.jpg",saleCount:2342},
          {title:"雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",price:233,oldPrice:598,url:"imgs/c.jpg",saleCount:2342},
          {title:"【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",price:233,oldPrice:598,url:"imgs/d.jpg",saleCount:2342},
          {title:"BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins",price:233,oldPrice:598,url:"imgs/e.jpg",saleCount:2342},
          {title:"香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣",price:233,oldPrice:598,url:"imgs/f.jpg",saleCount:2342},
          {title:"SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",price:233,oldPrice:598,url:"imgs/g.jpg",saleCount:2342},
          {title:"美特斯邦威女MTEE 贺岁系列中长款风衣736598",price:233,oldPrice:598,url:"imgs/h.jpg",saleCount:2342},
          {title:"imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套",price:233,oldPrice:598,url:"imgs/i.jpg",saleCount:2342},
          {title:"BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣",price:233,oldPrice:598,url:"imgs/j.jpg",saleCount:2342},
          {title:"憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外",price:233,oldPrice:598,url:"imgs/k.jpg",saleCount:2342},
          {title:"美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342}],
        categoryArr:[{id:1,name:"精彩活动"},{id:2,name:"精品女装"},
          {id:3,name:"品牌男装"},{id:4,name:"母婴产品"}],
        bannerArr:[{id:1,url:"imgs/b1.jpg"},{id:2,url:"imgs/b2.jpg"},
          {id:3,url:"imgs/b3.jpg"},],
        currentIndex:"1-1",
        value1:"",
        value2:"",
        deskId:"",
      }
    },
   methods: {
     handleOpen(key, keyPath) {
       console.log(key, keyPath);
     },
     handleClose(key, keyPath) {
       console.log(key, keyPath);
     },
     handleCategoryDelete(i,a){
       v.categoryArr.splice(i,1);
       v.$message("成功删除了"+a.name)
     },
     handleBannerDelete(i,b){
       v.bannerArr.splice(i,1);
       v.$message("成功删除了轮播图")
     },
     handleProductDelete(i,p){
       v.productArr.splice(i,1);
       v.$message("成功删除了"+p.title)
     },
     handleProductAmend(i,p){

     },
     handleSelect(key,keyPath){
       if(key=='1-2'){

       }else if(key=='2-2'){
         location.href="insertBanner.html";
       }else if(key=='3-2'){
         location.href="insertProduct.html"
       }else {
         v.currentIndex = key;
       }
     }
   }
  })
</script>
</html>